<template>
  <div class="select-account-range">
    <el-form-item label="" prop="type">
      <el-button size="small" @click="dialogVisible = true">{{$t('weixin.select')}}{{ name }}</el-button>
    </el-form-item>

    <el-form-item label="" prop="type" v-if="tableData.length > 0">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
      >
        <!-- 名称 -->
        <el-table-column
          :prop="propList[0]"
          :label="`${name}${$t('publics.name')}`"
        />
        <!-- 联系人 -->
        <el-table-column
          v-if="type != 3"
          :prop="propList[1]"
          :label="$t('shop.contactName')"
        />
        <!-- 联系电话 -->
        <el-table-column
          :prop="propList[2]"
          :label="$t('shop.contactTel')"
        />
        <!-- 联系邮箱 -->
        <el-table-column
          v-if="type != 3"
          prop="email"
          :label="$t('shopProcess.email')"
        />
        <!-- 操作 -->
        <el-table-column
          class="table-item"
          :label="$t('text.menu')"
          align="center"
        >
          <template slot-scope="{row}">
            <div class="table-btn-con">
              <!-- 删除 -->
              <el-button type="text" @click="deleteHandle(row)">{{$t('text.delBtn')}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <!-- 选择弹框 -->
    <el-dialog
      :title="`${$t('weixin.select')}${name}`"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <el-form @submit.native.prevent  :inline="true" :model="searchParam" class="demo-form-inline" size="small">
        <el-form-item :label="`${name}${$t('publics.name')}`">
          <el-input v-model="searchParam[propList[0]]" :placeholder="`${name}${$t('publics.name')}`" clearable />
        </el-form-item>
        <el-form-item>
          <!-- 查询 -->
          <el-button type="primary" size="small" @click="searchInfo()">{{$t('pictureManager.query')}}</el-button>
          <!-- 清空 -->
          <el-button size="small" @click="clearSearchInfo()">{{$t('order.clear')}}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="pageVO.records"
        v-loading="pageLoading"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :row-key="getRowKeys"
      >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55">
      </el-table-column>
        <!-- 名称 -->
        <el-table-column
          :prop="propList[0]"
          :label="`${name}${$t('publics.name')}`"
        />
        <!-- 联系人 -->
        <el-table-column
          v-if="type != 3"
          :prop="propList[1]"
          :label="$t('shop.contactName')"
        />
        <!-- 联系电话 -->
        <el-table-column
          :prop="propList[2]"
          :label="$t('shop.contactTel')"
        />
        <!-- 状态 -->
        <el-table-column
          :prop="propList[3]"
          :label="$t('brand.status')"
        >
          <template slot-scope="{row}">
            <!-- 承租商状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:平台下线待审核 4:开店申请中 5:开店申请待审核) -->
            <div v-if="type == 2">
              <span v-if="row[propList[3]] === -1">{{$t('shopProcess.deleted')}}</span>
              <span v-if="row[propList[3]] === 0">{{$t('shopProcess.closed')}}</span>
              <span v-if="row[propList[3]] === 1">{{$t('shopProcess.inOperation')}}</span>
              <span v-if="row[propList[3]] === 2">{{$t('brand.offlinePlatForm')}}</span>
              <span v-if="row[propList[3]] === 3">{{$t('brand.offlineReview')}}</span>
              <span v-if="row[propList[3]] === 4">{{$t('brand.shopApplication')}}</span>
              <span v-if="row[propList[3]] === 5">{{$t('brand.offlinePendingReview')}}</span>
            </div>
            <!-- 店铺审核状态(-1:未通过 0:未审核 1:已通过 2:平台下线 3:平台下线待审核 -->
            <div v-if="type == 1">
              <span v-if="row[propList[3]] === -1">{{$t('shop.applyFail')}}</span>
              <span v-if="row[propList[3]] === 0">{{$t('shopProcess.shopApplication')}}</span>
              <span v-if="row[propList[3]] === 1">{{$t('brand.closed')}}</span>
              <span v-if="row[propList[3]] === 2">{{$t('brand.inOperation')}}</span>
              <span v-if="row[propList[3]] === 3">{{$t('brand.brandOffline')}}</span>
              <span v-if="row[propList[3]] === 4">{{$t('brand.brandOfflineToBeReviewed')}}</span>
              <span v-if="row[propList[3]] === 5">{{$t('brand.platformOffline')}}</span>
              <span v-if="row[propList[3]] === 6">{{$t('brand.platformOfflineToBeReviewed')}}</span>
            </div>
            <!-- 用户状态 1正常 0无效 -->
            <div v-if="type == 3">
              <span v-if="row[propList[3]] === 1">{{$t('shopFeature.searchBar.normal')}}</span>
              <span v-if="row[propList[3]] === 0">{{$t('shopProcess.disable')}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->
      <el-pagination
        v-if="pageVO.total>0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParam.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchParam.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageVO.total">
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <!-- 取消 -->
        <el-button size="small" @click="dialogVisible = false">{{$t('resource.cancel')}}</el-button>
        <!-- 确定 -->
        <el-button size="small" type="primary" @click="submit">{{$t('resource.confirm')}}</el-button>
      </span>
    </el-dialog>
    <!-- end 选择弹框 -->

  </div>
</template>

<script>
export default {
  name: 'select-account-range',
  data () {
    return {
      tableData: [],
      dialogVisible: false,
      multipleSelection: [],
      searchParam: {
        size: 10,
        current: 1
      },
      // 返回参数
      pageVO: {
        records: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      // loading
      pageLoading: true
    }
  },
  props: {
    // type 1:门店 2：承租商 3:用户
    type: {
      type: Number,
      default: 0
    },
    tableList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    name () {
      switch (this.type) {
        case 1:
          return this.$t('shopProcess.shop')
        case 2:
          return this.$t('shopProcess.brand')
        case 3:
          return this.$t('publics.user')
      }
    },
    propList () {
      // 展示字段名
      const brandProp = ['brandName', 'contactName', 'tel', 'brandStatus']
      const shopProp = ['shopName', 'userName', 'tel', 'shopProcessStatus']
      const userProp = ['nickName', '', 'userMobile', 'status']
      switch (this.type) {
        case 1:
          return shopProp
        case 2:
          return brandProp
        case 3:
          return userProp
      }
    },
    idKey () {
      switch (this.type) {
        case 1:
          return 'shopId'
        case 2:
          return 'brandId'
        case 3:
          return 'userId'
      }
    }
  },
  watch: {
    /**
     * @param {boolean} data 遮罩显隐
     */
    dialogVisible (data) {
      if (data) {
        this.$nextTick(() => {
          // 清空用户的选择
          this.$refs.multipleTable.clearSelection()
          this.multipleSelection = this.tableData.map(item => item[this.idKey])
          this.tableData.forEach(row => {
            let index = this.pageVO.records.findIndex(item => item[this.idKey] === row[this.idKey])
            // 显示将已经选择的项
            if (index >= 0) {
              // toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中
              // 注意：调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它
              this.$refs.multipleTable.toggleRowSelection(this.pageVO.records[index], true)
            }
          })
        })
      }
    }
  },
  mounted () {
    this.getPage()
    this.tableData = this.tableList
  },
  methods: {
    // 分页条
    handleSizeChange (e) {
      this.searchParam.size = e
      this.getPage()
    },
    handleCurrentChange (e) {
      this.searchParam.current = e
      this.getPage()
    },
    // end 分页条

    /**
     * 获取用户列表数据
     */
    getUserList () {
      this.$http({
        url: this.$http.adornUrl('/admin/user/page'),
        method: 'get',
        params: this.$http.adornParams(this.searchParam)
      }).then(({ data }) => {
        if (!data) return
        this.pageVO = data
      }).finally(() => {
        this.pageLoading = false
      })
    },

    /**
     * 获取承租商列表数据
     */
    getBrandlist () {
      this.$http({
        url: this.$http.adornUrl('/platform/brand/page'),
        method: 'get',
        params: this.$http.adornParams(Object.assign(
          this.searchParam,
          {
            // 承租商状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:平台下线待审核 4:开店申请中 5:开店申请待审核)
            brandStatusList: [0, 1, 2, 3]
          }
        ))
      }).then(({ data }) => {
        if (!data) return
        this.pageVO = data
      }).finally(() => {
        this.pageLoading = false
      })
    },
     /**
     * 获取门店列表数据
     */
    getShoplist () {
      this.$http({
        url: this.$http.adornUrl('/platform/shop/pageShop'),
        method: 'get',
        params: this.$http.adornParams(Object.assign(
          this.searchParam,
          {
            auditingStatusList: [1, 2, 3]
          }
        ))
      }).then(({ data }) => {
        if (!data) return
        this.pageVO = data
      }).finally(() => {
        this.pageLoading = false
      })
    },
    getPage () {
      this.pageLoading = true
      switch (this.type) {
        case 1:
          return this.getShoplist()
        case 2:
          return this.getBrandlist()
        case 3:
          return this.getUserList()
      }
    },

    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    submit () {
      this.dialogVisible = false
      this.tableData = this.multipleSelection

      const ids = this.tableData.map(item => item[this.idKey])
      this.$emit('getIds', ids)
    },
    /**
     * 清空搜索内容
     */
    clearSearchInfo () {
      this.searchParam[this.propList[0]] = null
      this.searchParam.current = 1
      this.getPage()
    },
    searchInfo () {
      this.searchParam.current = 1
      this.getPage()
    },
    // 记录选中状态
    getRowKeys (row) {
      return row[this.idKey]
    },
    /**
     * 删除项
     * @param {Object} row 删除对象数据
     */
    deleteHandle (row) {
      this.tableData = this.tableData.filter(item => item[this.idKey] !== row[this.idKey])
      this.multipleSelection = this.tableData
      const ids = this.tableData.map(item => item[this.idKey])
      this.$emit('getIds', ids)
    }
  }
}
</script>

<style lang="scss">

</style>
